<template>
    <div class="box-item">
        <div class="box-title">出租率</div>
        <div class="box-body">
            <div class="chart-container">
                <Echart id="charts_top2" :options="options" class="left_center_inner" ref="charts2" height="200px" />
            </div>
        </div>
    </div>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';

export default {
    name: 'PackLBCenter',
    data() {
        return {
            options: {},
            optionData: {
                axisData: ['8月', '9月', '10月', '11月', '12月', '1月', '2月'],
                seriesData: [67, 71, 75, 76, 78, 81, 85],
            },
        };
    },
    created() {
        this.getData(this.optionData);
    },
    mounted() { },
    beforeDestroy() { },
    methods: {
        getData(currentData) {
            let axisData = currentData.axisData;
            let seriesData = [[...currentData.seriesData]];

            let maxCity1 =
                axisData[seriesData[0].indexOf(Math.max(...seriesData[0]))];
            const options = {
                // backgroundColor: "#0F224C", //背景色
                grid: {
                    top: '15%',
                    left: '4%',
                    right: '8%',
                    bottom: '6%',
                    containLabel: true,
                },
                legend: {
                    show: true,
                    top: '0%',
                    right: '4%',
                    icon: 'circle',
                    itemWidth: 12,
                    itemHeight: 12,
                    // itemGap: 60,
                    textStyle: legend.textStyle,
                    data: ['占比'],
                },
                xAxis: {
                    type: 'category',
                    data: axisData,
                    // boundaryGap: false,
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, // 不显示下切线
                    },
                    axisLabel: xAxis.axisLabel,
                    axisLine: {
                        lineStyle: {
                            background: 'rgba(176, 215, 255, 0.4)',
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        // max: 1200,
                        // // min: 100,//
                        // interval: 300,
                        axisLabel: yAxis.axisLabel,
                        axisLine: {
                            show: false,
                            // interval: 1,
                            lineStyle: {
                                color: 'rgba(0,0,0,0.5)',
                            },
                        },
                        splitLine: {
                            show: true,
                            // interval: 1,
                            lineStyle: {
                                color: ['rgba(176, 215, 255, 0.2)'],
                                width: 1,
                                type: 'dashed',
                            },
                        },
                        // splitLine: {
                        //   show: false,
                        // },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [],
            };
            const series = [
                {
                    name: '占比',
                    type: 'line',
                    smooth: false,
                    showSymbol: false,
                    // symbol: 'circle',
                    // symbolSize: 6,
                    data: seriesData[0],
                    itemStyle: {
                        normal: {
                            // color: "#38FFBA",
                            color: 'rgba(0,219,254, .7)',
                        },
                    },
                    areaStyle: {
                        color: colorsB[0],
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (par) => {
                            return par.value + '%';
                        },
                        textStyle: { fontSize: 12, color: '#FFF' },
                    },
                    // markPoint: {
                    //   symbol: 'circle',
                    //   symbolSize: [14, 14], // 容器大小
                    //   symbolOffset: ['0%', '0%'],
                    //   data: [
                    //     {
                    //       name: '最大值',
                    //       type: 'max',
                    //       valueIndex: 1,
                    //     },
                    //   ],
                    //   label: {
                    //     show: true,
                    //     position: 'top',
                    //     fontSize: 12,
                    //     color: '#FFF',
                    //     formatter: (par) => {
                    //       return par.value + '%';
                    //     },
                    //   },
                    // },
                },
            ];
            options.series = series;
            this.options = options;
        },
    },
};
</script>

<style lang="scss" scoped>
.box-item {
    width: 600px;
    height: 245px;
    // background: url('../../../assets/img/launch/pack/pack_box_bg0.png') no-repeat center;
    // background-position: center center;
    // background-size: 100% 100%;

    .box-title {
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 35px;
        line-height: 30px;
        // text-indent: 3em;
        padding-left: 50px;
        font-size: 20px;
        // background: linear-gradient(90deg, rgba(21, 77, 160, 0.2) 0%, rgba(21, 77, 160, 0) 100%), linear-gradient(270deg, rgba(21, 77, 160, 0) 0%, rgba(21, 132, 185, 0.44) 100%);
        background: url('../../../assets/img/launch/pack/header.png') no-repeat center;
        background-position: left center;
        background-size: cover;
    }

    .box-body {
        display: flex;
        flex-direction: column;
        // justify-content: space-around;
        align-items: center;
        height: 180px;

        .chart-container {
            position: relative;
            width: 100%;
            height: 100%;

            .left_center_inner,
            .bg {
                width: 100%;
                height: 100%;
            }

            .left_center_inner {
                left: -15px;
                top: -65px;
                z-index: 1;
                // border: 1px solid red;
            }
        }
    }
}
</style>